<template>
	<view style="background-color: #f7f7f7;">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff;">输入核销码</view>
			<view class="card">
				<view style="display: flex; justify-content: space-between; align-items: start; margin-top: 35rpx;" :style="{'height':checkImg ? '1200rpx' : '100rpx'}">
					<view style="color: #4c8efe;">输入核销码</view>
					<view style="display: flex; justify-content: space-between; align-items: center; border: 1px solid gray; border-radius: 20px; padding-left: 20rpx; width: 450rpx;">
						<!-- 绑定输入的核销码 -->
						<input v-model="verificationCode" />
						<button style="width: 100rpx; height: 45rpx; font-size: 20rpx; color: #fff; background-color: #4c8efe; border-radius: 20px;" @click="getBillByCode">识别</button>
					</view>
				</view>
			</view>
		</view>	
		<view>
		<view v-show="checkImg">
			<view class="card" >
				<view class="check_code">核销码{{oder.verificationCode}}</view>
				<view class="line"></view>
				<view class="big_title">服务内容</view>
				<view class="small_title">{{service.name}}</view>
				<view class="small_title">{{service.introduction}}</view>
				<!-- <view class="small_title">{{service.img}}</view> -->
				<view class="small_title">
					<!-- 使用 image 组件显示图片，:src 绑定图片地址，设置默认样式 -->
					<image :src=service.img mode=""></image>
				</view>
<!-- 				<view class="small_title">内饰脚垫简单除尘</view>
				<view class="small_title">(不包含虫尸、水泥、沥青和顽固物质清理等)</view> -->
				<view class="line"></view>
				<view class="big_title">订单信息</view>
				<view class="small_title">订单价格：￥{{service.originalPrice}}</view>
				<view class="small_title">实付金额：<span style="font-weight: 500;">￥{{oder.price}}</span></view>
				<view class="small_title">优惠金额：￥{{service.originalPrice-oder.price}}</view>
				<view class="small_title">订单编号 {{oder.id}}</view>
				<view class="small_title">支付时间 {{oder.payTime}}</view>
				<view class="small_title">预约时间 {{oder.reservationTime}}</view>
			</view>
			<button v-if="!checkConfirm && checkImg" @click="confirmCheck()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #4c8efe; color: white;">确认核销</button>
			<button v-if="checkConfirm" @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #808080; color: white;">已核销</button>
		</view>	
		</view>
	</view>	
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request.js';
// import baseUrl from '@/pages/utils/urlConfig.js';
import { onLoad } from '@dcloudio/uni-app'



const checkImg = ref(false);
const checkConfirm =ref(false);
const oder = ref({})
const service = ref({})
// oder.value.serviceId
// 存储输入的核销码
const verificationCode = ref('Ls7ZSSFpeVFzjVti'); 
const token = uni.getStorageSync('token');

onLoad((options) => {
  // 接收传递过来的参数
  verificationCode.value = options.verificationCode;
  console.log('接收到的参数 verificationCode:', verificationCode);
	// getBillByCode()
});

function getBillByCode() {
  if (verificationCode.value=='') {
    uni.showToast({
      title: '请输入核销码Ls7ZSSFpeVFzjVti',
      icon: 'none'
    });
		return;
	}
	request({
		url: '/yyq/orders/getcode/', 
		method: 'GET',
		data: {
			verificationCode: verificationCode.value
		},
		header: {
			Authorization: token
		},
		success: res => {
		  console.log('获取成功', res.data.data);
			oder.value = res.data.data
			
			request({
				url: '/yyq/fuwudetails/'+oder.value.serviceId, 
				method: 'GET',
				header: {
					Authorization: token
				},
				success: res => {
				  console.log('获取成功', res.data.data);
					service.value = res.data.data
					checkImg.value = true;
				},
			});
		},
	});

}
		
	function backPage(){
		uni.navigateBack()
	}

	function confirmCheck(){
		uni.showModal({
			title: '核销此订单', // 弹框标题
			content: '请您仔细核对此订单，此操作不可撤销，请谨慎操作！', // 弹框内容
			confirmText: '确认', // 确认按钮文本
			cancelText: '取消', // 取消按钮文本
			success: (res) => {
			  if (res.confirm) {
				// 用户点击了确定按钮
				console.log('用户点击了确定');
				checkConfirm.value = true;
				oder.value.status = 5;
				request({
					url: '/yyq/orders/', 
					method: 'PUT',
					data: {
						carOrder: oder.value
					},
					header: {
						Authorization: token
					},
					success: res => {
					  console.log('状态修改成功', res);
					},
				});
			  } else if (res.cancel) {
				// 用户点击了取消按钮
				console.log('用户点击了取消');
				checkConfirm.value = false;
			  }
			}
		  });
		}
		function toIndex(){
			uni.redirectTo({
				url:'/pages/index/index'
			})
		}
</script>

<style>
@import "@/common/app.css";
.card{border-radius: 20px; background-color: #fff; margin: 30rpx; padding: 30rpx 20rpx;}
.check_code{ font-weight: 600; text-align: center; }
.line{ width: 100%; height: 1px; background-color: gray; margin: 20rpx 10rpx; }
.big_title{margin: 20rpx; font-weight: 600;}	
.small_title{ margin: 20rpx; }
.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
		   
	       
</style>
